<template>
	<view class="content ba_img">
		<view :style="{
        height: statusBarHeight + 'px',
      }">
		</view>
		<view class="head" :style="{
        top: statusBarHeight + 'px',
        background: isHeadBack ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0)',
      }">
			山海
		</view>

		<scroll-view :style="{
        height: windowHeihgt + 'px',
      }" :scroll-y="true" @scroll="scroll">
			<view :style="{
          height: height + 'px',
          width: '100%',
        }">
			</view>
			<view class="head_tabs">
				<view class="tabs_item" v-for="(item, index) in headList" @tap="tabTap(item.id)">
					<view style="
              width: 108rpx;
              height: 108rpx;
              display: flex;
              align-items: center;
              justify-content: center;
            " v-if="currentIndex != item.id">
						<image src="../../static/images/icon_sh_guiji_three.png" style="width: 108rpx; height: 108rpx"
							mode="" v-if="index % 2 == 0"></image>
						<image src="../../static/images/icon_sh_guiji_three.png" style="width: 70rpx; height: 70rpx"
							mode="" v-if="index % 2 == 1"></image>
					</view>
					<view style="
              width: 108rpx;
              height: 108rpx;
              display: flex;
              align-items: center;
              justify-content: center;
            " v-else>
						<image src="../../static/images/icon_sh_guiji_one.png" style="width: 108rpx; height: 108rpx"
							mode="" v-if="index % 2 == 0"></image>
						<image src="../../static/images/icon_sh_guiji_one.png" style="width: 70rpx; height: 70rpx"
							mode="" v-if="index % 2 == 1"></image>
					</view>
					<view class="tabs_text">
						<text style="text-align: center">{{ item.name }}</text>
						<text style="text-align: center">({{ item.spirit }}-{{ item.chan }})</text>
					</view>
				</view>
			</view>

			<view style="
          width: 750rpx;
          height: 530rpx;
          position: relative;
          left: -30rpx;
          margin-top: 34rpx;
        " v-show="currentIndex != -1">
				<image src="../../static/images/pic_sh_ditu.png" style="width: 100%; height: 100%" mode=""></image>
				<!-- 山西陕西 ↓ -->
				<view class="mark" style="left: 445rpx; top: 225rpx">
					<image :src="
              currentIndex == 8
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
				<!-- 京津翼塞北 ↓ -->
				<view class="mark" style="left: 515rpx; top: 180rpx">
					<image :src="
              currentIndex == 9
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
				<!-- 昆仑山脉 ↓ -->
				<view class="mark" style="left: 175rpx; top: 290rpx">
					<image :src="
              currentIndex == 10
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
				<!-- <view class="mark" style="left: 265rpx;top: 240rpx;">
					<image src="../../static/images/icon_dian_liang.png" mode=""></image>
				</view> -->
				<!-- 巴蜀 ↓ -->
				<view class="mark" style="left: 355rpx; top: 305rpx">
					<image :src="
              currentIndex == 1
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
				<!-- 云贵 ↓ -->
				<view class="mark" style="left: 335rpx; top: 380rpx">
					<image :src="
              currentIndex == 2
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
				<!-- 楚湘 ↓ -->
				<view class="mark" style="left: 460rpx; top: 340rpx">
					<image :src="
              currentIndex == 3
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
				<!-- 江南 ↓ -->
				<view class="mark" style="left: 560rpx; top: 320rpx">
					<image :src="
              currentIndex == 4
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
				<!-- 岭南闽南 ↓ -->
				<view class="mark" style="left: 485rpx; top: 390rpx">
					<image :src="
              currentIndex == 5
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
				<!-- 中原腹地 ↓ -->
				<view class="mark" style="left: 480rpx; top: 262rpx">
					<image :src="
              currentIndex == 6
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
				<!-- 山东东北 ↓ -->
				<view class="mark" style="left: 630rpx; top: 100rpx">
					<image :src="
              currentIndex == 7
                ? '../../static/images/icon_dian_liang.png'
                : '../../static/images/icon_dian.png'
            " mode=""></image>
				</view>
			</view>
			<view style="
          width: 100%;
          height: 690rpx;
          position: relative;
          display: flex;
          justify-content: center;
          top: -130rpx;
        ">
				<image src="../../static/images/diqiu.gif" style="width: 690rpx; height: 690rpx" mode=""></image>
			</view>
			<view style="
          width: 100%;
          display: flex;
          justify-content: center;
          position: relative;
          top: -160rpx;
        ">
				<view class="btn" v-if="currentIndex == -1" @click="toHome">
					<image src="../../static/images/icon_sh_anniu_zuo.png" mode=""></image>
					<text>进入首页</text>
					<image src="../../static/images/icon_sh_anniu_you.png" mode=""></image>
				</view>

				<view class="xingmen" v-else>
					<view class="" @click="toUrl(`/pages/stargate/Tianxing?id=${currentIndex}`)">
						天行星门
					</view>
					<view class="" @click="toUrl(`/pages/stargate/Tianwen?id=${currentIndex}`)">
						天问星门
					</view>
					<view class="" @click="toUrl('/pages/home/minimalInvasive', 1)">
						天心星门
					</view>
				</view>
			</view>
			<view :style="{ color: 'white', 'text-align': 'center' }" v-if="currentIndex == -1">{{botText}}</view>
		</scroll-view>

		<!-- <l-drag ref="lDrag" @btnClick='btnClick' :boundary="{top: 0,left: 0,bottom: 0,right: 0}"
			:initLocation="{left: 0, top: 0 }">
		</l-drag> -->
	</view>
</template>

<script>
	import {
		Region
	} from "@/common/api/mountainSea.js";
	import storage from "@/common/storage"; // 缓存封装
	const bgAudioManager = uni.getBackgroundAudioManager();
	export default {
		data() {
			return {
				statusBarHeight: 0,
				headList: [
					// {
					// 	name:'巴蜀',
					// 	spirit:'格物',
					// 	chan:'松'
					// },
					// {
					// 	name:'云贵',
					// 	spirit:'格物',
					// 	chan:'静'
					// },
					// {
					// 	name:'楚湘',
					// 	spirit:'致知',
					// 	chan:'定'
					// },
					// {
					// 	name:'江南',
					// 	spirit:'致知',
					// 	chan:'慧'
					// },
					// {
					// 	name:'岭南闽南',
					// 	spirit:'诚意',
					// 	chan:'观'
					// },
					// {
					// 	name:'中原腹地',
					// 	spirit:'正心',
					// 	chan:'清'
					// },
					// {
					// 	name:'山东东北',
					// 	spirit:'修身',
					// 	chan:'净'
					// },
					// {
					// 	name:'山西陕西',
					// 	spirit:'齐家',
					// 	chan:'化'
					// },
					// {
					// 	name:'京津冀塞北',
					// 	spirit:'经世',
					// 	chan:'明'
					// },
					// {
					// 	name:'昆仑山脉 (西藏青海新)',
					// 	spirit:'平天下',
					// 	chan:'觉'
					// }
				],
				currentIndex: -1,
				height: 0,
				windowHeihgt: 0,
				isHeadBack: false,
				lastTime: "", //上一次点击的标识
				fileBgm: {},
				botText: "",
			};
		},
		onHide() {},
		onShow() {
			this.getAnWen();
		},
		onLoad() {
			this.getList();
			const jyJPush = uni.requireNativePlugin("JY-JPush");
			//  暂时只有安卓支持
			jyJPush.registerSDKCallBack((sdkCallBack) => {
				//  这里会返回regid，
				console.log("sdk Callback 结果 " + JSON.stringify(sdkCallBack));
			});
			// 此处只是演示 授权，实际应该弹出自己的隐私授权页面，或者用uniapp提供的隐私协议
			setTimeout(function() {
				jyJPush.setAuth({
						auth: "1",
					},
					(res) => {
						console.log("auth 结果 " + JSON.stringify(res));
						if (res.errorCode == 0) {
							//  安卓需要单独调用
							if (uni.getSystemInfoSync().platform == "android") {
								jyJPush.android_init((initRes) => {
									console.log("init 结果 " + JSON.stringify(initRes));
								});
							}
						}
					}
				);
			}, 5000);

			// if (uni.getSystemInfoSync().platform == "android") {
			jyJPush.setJYJPushAlias({
					userAlias: storage.get("user_id"),
				},
				(result) => {
					//  设置成功或者失败，都会通过这个result回调返回数据；数据格式保持极光返回的安卓/iOS数据一致
					//  注：若没有返回任何数据，考虑是否初始化完成
					// uni.showToast({
					//   icon: "none",
					//   title: JSON.stringify(result),
					// });
					console.log(JSON.stringify(result), "第二步");
				}
			);
			// }

			jyJPush.addJYJPushReceiveNotificationListener((result) => {
				//  监听成功后，若收到推送，会在result返回对应的数据；数据格式保持极光返回的安卓/iOS数据一致
				// uni.showToast({
				//   icon: "none",
				//   title: JSON.stringify(result) + "第三步",
				// });
				console.log(JSON.stringify(result), "第三步");
			});

			jyJPush.addJYJPushReceiveOpenNotificationListener((result) => {
				//  监听成功后，若点击推送消息，会触发result；数据格式保持极光返回的安卓/iOS数据一致
				// uni.showToast({
				//   icon: "none",
				//   title: JSON.stringify(result) + '第四步',
				// });

				console.log(JSON.stringify(result), "第四步");
				console.log(JSON.parse(result.notificationExtras));
				console.log(typeof result.notificationExtras);
				let type = JSON.parse(result.notificationExtras).type;
				if (type == 1) {
					uni.navigateTo({
						url: "/pages/message/message-system",
					});
				} else if (type == 2) {
					uni.navigateTo({
						url: "/pages/message/message-comment",
					});
				} else if (type == 3) {
					uni.navigateTo({
						url: "/pages/message/message-zan",
					});
				} else if (type == 4) {
					uni.navigateTo({
						url: "/pages/message/message-trends",
					});
				} else if (type == 5) {
					uni.navigateTo({
						url: "/pages/message/message-research",
					});
				}
				this.stopAudio();
			});
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.windowHeihgt =
				statusBarHeight.windowHeight - statusBarHeight.statusBarHeight;

			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select(".head")
					.boundingClientRect((data) => {
						// console.log("data", data);
						this.height = data.height;
					})
					.exec();
			});
		},
		mounted() {
			bgAudioManager.onEnded((res) => {
				console.log("播放结束");
				bgAudioManager.src = this.fileBgm.external_url;
				bgAudioManager.singer = "";
				bgAudioManager.title = this.fileBgm.file_name;
				bgAudioManager.coverImgUrl = this.fileBgm.preview_url;
				bgAudioManager.seek(0);
				bgAudioManager.play();
			});
		},
		methods: {
			btnClick() {

			},
			//停止背景音乐
			stopAudio() {
				bgAudioManager.src = "";
				bgAudioManager.stop();
			},
			getAnWen() {
				this.$http
					.appversionShanhai({})
					.then((res) => {
						console.log(res.data.file, "背景音乐");
						this.botText = res.data.shanhai.shanhai;
						bgAudioManager.src = res.data.file.external_url;
						bgAudioManager.singer = "";
						bgAudioManager.title = res.data.file.file_name;
						bgAudioManager.coverImgUrl = res.data.file.preview_url;
						this.fileBgm = res.data.file;

						// setTimeout(() => {
						//  console.log('111111');
						//  bgAudioManager.stop();
						// },3000)
						console.log(res.data.shanhai, "暗文");
						storage.set("shanAn", res.data.shanhai);
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			getList() {
				Region({}).then((res) => {
					// console.log("resssss", res);
					this.headList = res.data.list;
				});
			},
			go() {
				uni.navigateTo({
					url: "/pages/login/index",
				});
			},
			toUrl(url, num = 0) {
				this.stopAudio();
				if (num == 0) {
					uni.navigateTo({
						url,
					});
				} else {
					this.$scroll.top = 999;
					uni.switchTab({
						url,
					});
				}
			},
			tabTap(i) {
				if (i == this.lastTime) {
					this.currentIndex = -1;
					this.lastTime = "";
				} else {
					this.lastTime = i;
					this.currentIndex = i;
				}
			},
			toHome() {
				this.$scroll.top = 0;
				this.stopAudio();
				uni.switchTab({
					url: "/pages/home/index",
				});
			},
			scroll(e) {
				if (e.target.scrollTop == 0) {
					this.isHeadBack = false;
				} else {
					this.isHeadBack = true;
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		width: 100%;
		padding: 0 30rpx;
		height: 100%;
		box-sizing: border-box;
	}

	.ba_img {
		margin: 0;
		background: url("/static/images/index.png") no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
	}

	.head {
		width: 100%;
		font-size: 36rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		font-weight: bold;
		position: fixed;
		left: 0;
		z-index: 99;
	}

	.head_tabs {
		width: 100%;
		display: flex;
		white-space: nowrap;
		overflow-y: auto;
	}

	.tabs_text {
		display: flex;
		flex-direction: column;
		line-height: 38rpx;
		margin-top: 12rpx;
		color: #d8d8d8;
		font-weight: 600;
		font-size: 28rpx;
	}

	.tabs_item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 30rpx;
		z-index: 99;
	}

	.mark {
		width: 40rpx;
		height: 40rpx;
		position: absolute;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.btn {
		width: 362rpx;
		height: 96rpx;
		background: #507aad;
		box-shadow: 0rpx 4rpx 16rpx 0rpx #2e9aad,
			inset 0rpx 0rpx 21rpx 0rpx rgba(255, 255, 255, 0.8);
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #fff;
			margin: 0 21rpx;
		}

		image {
			width: 40rpx;
			height: 29rpx;
		}
	}

	.xingmen {
		width: 100%;
		height: 158rpx;
		display: flex;
		justify-content: space-around;
		position: relative;
		top: -50rpx;

		view {
			width: 120rpx;
			height: 158rpx;
			margin: 0;
			background: url("/static/images/pic_sh_tianxingxingmen.png") no-repeat;
			background-size: 100% 100%;
			color: #eee;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			display: flex;
			flex-direction: column-reverse;
			padding-bottom: 12rpx;
			box-sizing: border-box;
		}
	}
</style>